<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 小张送水公司后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script src="/jquery.js"></script>
</head>
<body>

<div id="viewport">

    <!-- Sidebar -->
    <div id="sidebar" th:replace="waterMainnenu::sidebar">
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
        </nav>
    </div>

    <!-- Content -->
    <div id="content">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
                        </a>
                    </li>
                    <li><a href="#">当前用户:[[${session.currentUser}]]</a></li>
                </ul>
            </div>
        </nav>
        <div class="col-md-12">
            <a class="btn btn-primary" th:href="@{/cust/preSaveCust}">添加客户信息</a>
            <a class="btn btn-primary" th:href="@{/hello}">回到首页</a>
            <a class="btn btn-primary" href="javascript:history.back(-1)">返回上一页</a>
            <div class="col-md-8" style="float: right">
                <form class="form-inline">
                    <label for="custName">客户名称：</label>
                    <input type="text" id="custName" class="form-control" th:name="custName" placeholder="请输入客户名称"/>
                    <label for="custMobile">手机号：</label>
                    <input type="text" id="custMobile"  class="form-control" th:name="custMobile" placeholder="请输入手机号"/>
                    <input type="submit" class="btn btn-primary" name="search" value="搜索"/>
                </form>
            </div>
        </div>



        <!--表格-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12" style="margin-top: 15px">
                    <table class="table table-bordered table-hover" border="1px">
                        <thead>
                        <tr class="success" style="text-align: center">
                            <td>客户编号</td>
                            <td>客户名称</td>
                            <td>客户地址</td>
                            <td>联系方式</td>
                            <td>水票数量</td>
                            <td>操作</td>

                        </tr>
                        </thead>
                        <tbody>
                        <!-- 渲染后客户列表-->
                        <tr th:each="cust : ${pageInfo.list}" style="text-align: center">
                            <td th:text="${cust.getCid()}"></td>
                            <td th:text="${cust.getCustName()}"></td>
                            <td th:text="${cust.getCustAddress()}"></td>
                            <td th:text="${cust.getCustMobile()}"></td>
                            <td th:text="${cust.getCustTicket()}"></td>
                            <td>
                                <a class="btn btn-danger" th:href="@{'/cust/delCust/'+${cust.getCid()}}">删除</a>
                                <a class="btn btn-success" th:href="@{'/cust/preUpdateCust/'+${cust.getCid()}}">修改</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <!--显示分页信息部分代码-->
        <div class="modal-footer no-margin-top">
            <div class="col-md-6">
                <strong>
                    当前第<span style="color: red">[[${pageInfo.pageNum}]]</span>页
                    共 <span style="color: red">[[${pageInfo.pages}]]</span> 页
                    一共<span style="color: red">[[${pageInfo.total}]]</span> 条记录
                </strong>
            </div>
            <ul class="pagination pull-right no-margin">

                <!--hasPreviousPage 是否有前一页-->
                <li th:if="${pageInfo.hasPreviousPage}">
                    <a th:href="@{'/cust/listCust?pageNum=1&pageSize=10'}">首页</a>
                </li>
                <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                    <!--prePage:前一页-->
                    <a th:href="@{'/cust/listCust?pageNum='+${pageInfo.prePage}+'&pageSize=10'}">
                        <i class="ace-icon fa fa-angle-double-left"></i>
                        <span>&laquo;</span>
                    </a>
                </li>

                <!--遍历条数-->
                <!--navigatepageNums：所有导航页号-->
                <li th:each="nav:${pageInfo.navigatepageNums}">
                    <a th:href="@{'/cust/listCust?pageNum='+${nav}+'&pageSize=10'}" th:text="${nav}" th:if="${nav!=pageInfo.pageNum}"></a>
                    <span style="font-weight: bold;background: #6faed9;" th:text="${nav}" th:if="${nav==pageInfo.pageNum}"></span>
                </li>

                <!--hasNextPage：是否有下一页-->
                <li th:if="${pageInfo.hasNextPage}">
                    <a th:href="@{'/cust/listCust?pageNum='+${pageInfo.nextPage}+'&pageSize=10'}">
                        <i class="ace-icon fa fa-angle-double-right"></i>
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <li th:if="${pageInfo.hasNextPage}">
                    <a th:href="@{'/cust/listCust?pageNum='+${pageInfo.pages}+'&pageSize=10'}">尾页</a>
                </li>
            </ul>
        </div>

    </div>
</div>
</div>
<script>
    $("#n1").css("background","#FFF");
    $("#n1_1").css("color","#000");
    $("#n1_2").css("color","#000");

</script>
</body>
</html>